<template>
    <!-- 根目录 -->
    <div>
        <Header></Header>
        <!-- 头部 -->
        <div class="product-header">
            <div class="header-content">
                <!-- 头部标题 -->
                <div class="product-title">
                    <span v-for="product in products" :key="product.name" @click="selectProduct(product.name)"
                        :class="{ active: selectedProduct === product.name }">{{ product.name }}</span>
                </div>
            </div>
        </div>

        <!-- 介绍 -->
        <div class="product_introduce">
            <!-- 文字介绍 -->
            <div v-for="product in products" :key="product.name" v-if="product.name === selectedProduct">
                <p class="p1">{{ product.name }}</p>
                <!-- 图片 -->
                <div class="img">
                    <img :src="require('@/assets/images/TravelWearables/' + product.image)" alt="Product Image" />
                    <img :src="require('@/assets/images/TravelWearables/' + product.image2)" alt="Product Image" />
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <Footer></Footer>
    </div>
</template>
<script>
//引入底部组件
import Footer from "@/components/Footer.vue";
import Header from "@/components/Header.vue";
//引入数据
let travelWearables = require("@/assets/data/travelWearables.json");
export default {
    components: {
        Footer,
        Header
    },
    name: 'TravelWearables',
    data() {
        return {
            products: travelWearables,
            selectedProduct: 'Xiaomi SU 7',
        }
    },
    methods: {
        selectProduct(productName) {
            this.selectedProduct = productName;
        }
    }
}
</script>

<style scoped>
.product-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 70px;
    /* 这里设置为 .site-header 的高度加上希望的间距值 */
    left: 0;
    width: 100%;
    z-index: 9998;
    /* 可根据需要调整 */
}


.header-content {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-title {
    position: relative;
}

.product-title span {
    cursor: pointer;
    color: black;
    /* 设置默认颜色 */
    transition: color 0.3s;
    /* 添加颜色过渡效果 */
}

.product-title span:hover,
.product-title span:focus {
    /* 鼠标悬浮或获取焦点时的颜色 */
    color: orange;
}

.product-title span:before {
    content: "|";
    margin: 0 10px;
    color: black;
}

.product-title span:first-child:before {
    content: "";
    /* 第一个产品标题前面不需要竖线 */
    margin-right: 0;
}

.product_introduce {
    text-align: center;
}

.product_introduce div {
    margin-bottom: 20px;
    position: relative;
}

.product_introduce .p1 {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-transform: uppercase;
    margin: 10px 0;
}

.product_introduce .img img {
    width: 100%;
    max-width: 100%;
    /* 添加间隔 */
    margin-bottom: 20px;
    /* 添加阴影 */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}

.footer {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

.footer a {
    color: #fff;
    text-decoration: none;
    margin: 0 10px;
}
</style>
  